<template>
    <div class="form-group">
        <input 
        :type = "type" 
        class = "form-control form-control-lg" 
        :placeholder = "placeholder" 
        :name = "name" 
        :disabled = "disabled"
        :class="{'is-invalid':error}"
        @input="$emit('input',$event.target.value)"
        />
        <div v-if="error" class="invalid-feedback">
            {{error}}
        </div>
        <small class="form-text text-muted" v-if="info">
            {{info}}
        </small>
    </div>
</template>

<script>
export default {
  name: "textFieldGroup",
  props: {
    type: {
      type: String,
      default: "text"
    },
    placeholder: String,
    name: String,
    error: String,
    info: String,
    disabled: Boolean
  }
};
</script>

<style scoped>
</style>